<script setup>
import { useUserStore } from '@/stores'
import defaultAvatar from '@/assets/default_avatar.svg'
import SingleButton from '@/components/SingleButton.vue'
import ReturnButton from '@/components/ReturnButton.vue'
import { ref } from 'vue'
import showPrompt from '@/utils/showPrompt'
import { isValidateAccount, isValidEmail, isValidPhone } from '@/utils/regularVerify'
import router from '@/router'

const userStore = useUserStore()
const userInfo = ref({
  name: userStore.userInfo.name,
  email: userStore.userInfo.email,
  phone: userStore.userInfo.phone,
  sex: userStore.userInfo.sex,
  address: userStore.userInfo.address
})

const nameVerified = ref(false)
const emailVerified = ref(false)
const phoneVerified = ref(false)

const verifyInfo = () => {
  if (!isValidateAccount(userInfo.value.name)) {
    return (nameVerified.value = true)
  }
  if (userInfo.value.email && !isValidEmail(userInfo.value.email)) {
    return (emailVerified.value = true)
  }
  if (userInfo.value.phone && !isValidPhone(userInfo.value.phone)) {
    return (phoneVerified.value = true)
  }

  nameVerified.value = false
  emailVerified.value = false
  phoneVerified.value = false
}

const saveUserInfo = () => {
  if (!userInfo.value.name.trim()) {
    return showPrompt('用户名必填', 'error')
  }

  userStore.setUserInfo({
    name: userInfo.value.name,
    email: userInfo.value.email,
    phone: userInfo.value.phone,
    sex: userInfo.value.sex,
    address: userInfo.value.address
  })
  showPrompt('保存成功', 'success')
}

const logout = () => {
  userStore.clearUserInfo()
  showPrompt('退出成功', 'success')
  router.push('/')
}
</script>

<template>
  <div class="header">
    <ReturnButton class="back-btn" />
    <h1>个人中心</h1>
  </div>
  <div class="user-info">
    <div class="left">
      <div class="user-card">
        <img :src="userStore.userInfo?.avatar || defaultAvatar" />
        <div class="info">
          <h2>{{ userStore.userInfo.name }}</h2>
          <p>{{ userStore.userInfo.email }}</p>
        </div>
      </div>
      <SingleButton
        v-if="Number(userStore.adminPrivilege)"
        @click="router.push('/admin')"
        class="admin"
        text="后台管理"
      />
      <SingleButton @click="logout" class="exit" text="退出登录" />
    </div>
    <div class="right">
      <h3>用户信息</h3>
      <p>
        用户名
        <span v-if="nameVerified" class="error-tip"
          >&nbsp;&nbsp;--&nbsp;&nbsp;只允许中文/英文/数字</span
        >
      </p>
      <input
        :class="{ error: nameVerified }"
        type="text"
        @input="verifyInfo"
        placeholder="请输入用户名"
        v-model="userInfo.name"
      />
      <p>
        邮箱
        <span v-if="emailVerified" class="error-tip">&nbsp;&nbsp;--&nbsp;&nbsp;邮箱格式不正确</span>
      </p>
      <input
        :class="{ error: emailVerified }"
        type="email"
        @input="verifyInfo"
        placeholder="请输入邮箱"
        v-model="userInfo.email"
      />
      <p>
        电话号码
        <span v-if="phoneVerified" class="error-tip"
          >&nbsp;&nbsp;--&nbsp;&nbsp;手机号格式不正确</span
        >
      </p>
      <input
        :class="{ error: phoneVerified }"
        type="tel"
        @input="verifyInfo"
        placeholder="请输入电话号码"
        v-model="userInfo.phone"
      />
      <p>性别</p>
      <select v-model="userInfo.sex">
        <option value="secret">保密</option>
        <option value="boy">男</option>
        <option value="girl">女</option>
      </select>
      <br /><br />
      <h3>地址信息</h3>
      <p>收获地址</p>
      <input type="text" placeholder="请输入收货住址" v-model="userInfo.address" />
      <SingleButton @click="saveUserInfo" class="btn" text="保存" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.header {
  margin: auto;
  width: 1000px;
  transition: all 0.3s ease;

  @media (max-width: 1100px) {
    width: 860px;
  }

  @media (max-width: 900px) {
    width: 760px;
  }

  @media (max-width: 700px) {
    width: 400px;
  }

  .back-btn {
    margin: 20px 0 0 50px;
  }

  h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 20px 0 30px;
    color: #333;
    text-align: center;
    position: relative;

    &::after {
      content: '';
      display: block;
      width: 60px;
      height: 3px;
      background: var(--theme-color);
      margin: 10px auto 0;
      border-radius: 2px;
    }
  }
}
.user-info {
  display: flex;
  justify-content: center;
  gap: 200px;
  width: 100%;
  padding: 20px 0;
  transition: all 0.3s ease;

  @media (max-width: 1100px) {
    gap: 60px;
  }

  @media (max-width: 700px) {
    align-items: center;
    justify-content: initial;
    flex-direction: column;
  }

  .left {
    width: 300px;

    .admin {
      width: 100%;
      margin-top: 40px;
    }

    .exit {
      width: 100%;
      margin-top: 20px;
    }

    h1 {
      margin-bottom: 40px;
    }

    .user-card {
      display: flex;
      align-items: center;
      gap: 20px;

      .info {
        p {
          color: var(--theme-font-color);
        }
      }
    }
  }

  .right {
    h3 {
      margin-bottom: 20px;
    }

    p {
      margin-bottom: 5px;
    }

    input {
      width: 400px;
      height: 40px;
      border: none;
      outline: none;
      border: 2px solid #efefef;
      border-radius: 5px;
      margin-bottom: 10px;
      padding-left: 10px;
      transition: all 0.3s ease;

      @media (max-width: 900px) {
        width: 300px;
      }
    }

    select {
      width: 400px;
      height: 40px;
      border: none;
      outline: none;
      border: 2px solid #efefef;
      border-radius: 5px;
      padding: 0 7px;
      transition: all 0.3s ease;

      @media (max-width: 900px) {
        width: 300px;
      }

      option {
        background-color: var(--theme-color);
      }
    }

    .btn {
      margin-left: auto;
      margin-top: 20px;
    }

    .error-tip {
      font-size: 12px;
      line-height: 16px;
      color: rgb(178, 6, 6);
    }

    $error-color: rgb(240, 98, 98);
    .error {
      border: 2px solid $error-color;
    }
  }
}
</style>
